import React from "react";
import ReactDom from "react-dom";

import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";
import { ConnectedRouter } from "connected-react-router";
import history from "../history";

import Tabs from "../component/Tabs";

import loadable from "@loadable/component";
import { Spin } from "antd";

const Home = loadable(() => import(/* webpackChunkName: "Home" */"./Home/"), {fallback: <Spin />});
const Profile = loadable(() => import(/* webpackChunkName: "Profile" */"./Profile/"), {fallback: <Spin />});
const User = loadable(() => import(/* webpackChunkName: "User" */"./User/"), {fallback: <Spin />});
const Test = loadable(() => import(/* webpackChunkName: "Test" */"./Test/"), {fallback: <Spin />});

function Routes() {
  return (
    <div>
      <ConnectedRouter history={history}>
        <Switch>
          <Route path={"/profile"} component={Profile}></Route>
          <Route path={"/user"} component={User}></Route>
          <Route path={"/test"} component={Test}></Route>
          <Route path={"/"} component={Home}></Route>
        </Switch>
        <Tabs></Tabs>
      </ConnectedRouter>
    </div>
  );
}

export default Routes;
